<template>
  <div class="login-container">
    <el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
    <h3 class="title">ERP后台管理系统登录</h3>

    <el-form-item prop="mobile">
      <span class="icon-container iocn-container_login iconfont icon-yonghuming"></span>
      <el-input name="mobile" type="text" v-model="loginForm.mobile" autoComplete="on" placeholder="账号" />
    </el-form-item>

    <el-form-item prop="passWords">
      <span class="icon-container iocn-container_password iconfont icon-mima"></span>
      <el-input name="passWords" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.passWords" autoComplete="on"
        placeholder="密码" />
    </el-form-item>

    <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
  </el-form>
  <accountDialog v-if="showDialog" :showDialog.sync="showDialog" :mobile="mobile" :phoneCode="phoneCode" :phoneCodeSubmit="phoneCodeSubmit"></accountDialog>
  </div>
</template>
<script>
// import { isvalidUsername } from '@/utils/validate'
import accountDialog from './components/account_verify'
import {setToken,set_Userinfo,setTokenWL} from '@/utils/auth.js'

export default {
  name: 'login',
  components:{
    accountDialog
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        mobile: '',
        passWords: ''
      },
      loginRules: {
        mobile: [{ required: true, message: '请输入账号', trigger: 'blur'}],
        passWords: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      pwdType: 'password',
      loading: false,
      showDialog: false,
      mobile:'',
      companyId:''
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let thar = this;
          this.loading = true;
          this.$post("/sysUserLogin/getloginUser",this.loginForm,(data)=>{
                let u_info = data.sysUserInfo;
                set_Userinfo(u_info);
                this.$store.dispatch("setUserinfo",u_info);
                setToken(data.sys_token);  //先保存一份到cookie
                this.$store.dispatch("setToken",data.sys_token);

                // this.companyId = data.userInfo.companyId;
                thar.$post("/userInfo/getTaskToken",{mobile:this.loginForm.mobile,companyid:''},data => {
                       this.$store.dispatch("setTokenWL",data.token);
                       setTokenWL(data.token);  //先保存一份到cookie
                    },error => {
                      this.$message({   //没有token无法操作另一个系统
                        message: 'token没有获取成功,部分功能将无法使用',
                        type: 'success'
                      });
                  });
                this.$nextTick(() =>{
                  this.$message({
                    message: '登录成功',
                    type: 'success',
                    callback:this.$router.push({ path: '/set/companys' })
                  });
                  this.loading = false;
                })

          },(err)=>{
             this.$message.error(err);
             this.loading = false
          });
        }
        else
        {
          console.log('error submit!!')
          return false
        }
      })
    },
    phoneCode(form){
        this.$post("/userLogin/phoneCode",form,(data)=>{
          console.log(data);
      },(err)=>{
         this.$message.error(err);
      });
    },
    phoneCodeSubmit(form){
      this.$post("/userLogin/userPhoneAuth",form,(data)=>{
        this.$message({
          message:"验证成功",
          type:"success",
          callback:this.$router.push({ path: 'home' })
        });
      },(err)=>{
         this.$message.error(err);
      });
    }
  },
  created() {
  }
}
</script>

<style>
.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100vh;
  background-color: #2d3a4b;
}
.login-container input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
    -webkit-text-fill-color: #fff !important;
}
.login-container input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 12px 5px 12px 15px;
    color: #eee;
    height: 47px;
}
.login-container .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
}
.login-container .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}
.login-container .iocn-container_login,.login-container .iocn-container_password {
  display: inline-block;
  font-size: 20px;
  color: #889aa4;
  width: 35px;
  text-align: right;
  vertical-align: middle;
}
.login-container .title {
    font-size: 26px;
    font-weight: 400;
    color: #eee;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
}
.login-container .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
}
.login-container .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
}
.login-container .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.login-container .thirdparty-button {
    position: absolute;
    right: 35px;
    bottom: 28px;
}

</style>
